<template>
	<view>
		<view class="status_bar"></view>
		<view class="top" >
					 <u-icon size="50rpx" name="arrow-left" @click="toBack"></u-icon>
					 <text style="text-align: center;font-weight: bold;padding-left: 250rpx;">个人信息</text>
					 <!-- <u-icon size="50rpx" style="float: right;" name="plus" @click="addEvent"></u-icon> -->
		</view>
		<view class="info-container">
			<u-form ref="uForm" label-width="auto">
				<u-form-item label="头像">
					<u-avatar @click="onAvatar" mode="square" slot="right" :src="userInfo.avatar" size="100"></u-avatar>
				</u-form-item>



				<u-form-item label="用户名" right-icon="arrow-right" >
					<u-input  v-model="userInfo.username"  
						 input-align="right" />
				</u-form-item>
				<u-form-item  >
				<view style="display: flex;">
				     <view style="font-size: 30rpx;padding-top: 20rpx;">性别</view>
				      <view style="width: 600rpx;margin-left: 40rpx;">
				      	<uni-data-select v-model="userInfo.gender" :localdata="actionSheetList" @change="change" placeholder="请选择性别" style="direction:rtl;"></uni-data-select>
				      </view>
				    
				  </view>	
					<!-- <u-input @click="show = true" v-model="userInfo.gender"  :type="type"  :border="false"
						input-align="right" /> -->


					
					<!-- <uni-data-select
					        v-model="value"
					        :localdata="actionSheetList"
					        @change="change" 
					      ></uni-data-select> -->
				</u-form-item>


				<u-form-item label="个性签名" right-icon="arrow-right" >
					<textarea v-model="userInfo.slogan" :auto-height="true" style="text-align: right;width: 98%;">   
						</textarea>
				</u-form-item>
				<u-form-item label="个人描述" right-icon="arrow-right">
					<textarea v-model="userInfo.des" :auto-height="true" style="text-align: right;width: 98%;">   


						</textarea>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="out-btn">
			<button  @click="submit">确定修改</button>
		</view>
		
		<!-- 性别选择 -->
		<!-- <u-select v-model="showGender" :list="gender" @confirm="saveGender"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					color: "#fff",
					backgroundColor: '#333333'
				},
				show: false,
				form: {},
				userInfo: {
					username: " ",
					gender: "",
					slogan: " ",
					avatar: " ",
				},
				showGender: false,
				actionSheetList: [
									{
										value: 0, text: '男'
									},
									{
										value: 1, text: '女'
									}
								],
				
				type:'select'
			};
		},
		onShow(options) {
			this.getUserInfo();
			
		},
		methods: {
			change(e) {
				console.log('change', e)
			},
			submit(){
				this.$H.post("user/update",this.userInfo).then(res => {
			        console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title:"修改成功"
						})
					}
					
				})
			},
			getUserInfo() {
				this.$H.get("user/userInfo").then(res => {
					console.log(res)
					this.userInfo = res.result
					console.log("11111111",this.userInfo)
					if (res.result.gender === "0") {
						this.userInfo.gender = 0
					} else if (res.result.gender === "1") {
						this.userInfo.gender = 1
					}


				})
			},
			toBack(){
				uni.reLaunch({
					url:'/pages/mine/more/more'
				})
			},
			onAvatar() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						uni.showLoading({
							mask: true,
							title: "上传头像中"
						})
						uni.uploadFile({
							url: that.$c.domain + 'oss/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync("token")
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								// if (data.code == 0) {
								// 	that.updateAvatar(data.result)
								
								that.userInfo.avatar=data.url.url
									uni.hideLoading();
								}
							
						});
					}
				});

			},
			// updateAvatar(avatar) {
			// 	this.$H.post("user/userInfoEdit", {
			// 		avatar: avatar
			// 	}).then(res => {
			// 		if (res.code == 0) {
			// 			this.userInfo.avatar = avatar;
			// 		}
			// 	})
			// }
		}
	}
</script>
<style scoped>
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.top{
			display: flex;
			width: 100%;
			box-sizing: border-box;
			// justify-content: space-between;
			
		    align-items: center;
			height: 200rpx;
			padding: 0 30rpx;
			background: linear-gradient(to right, #ffdf80,#fff4de);
			
		}
	.info-container {
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.out-btn {
		margin: 40rpx 30rpx;
		box-shadow: 10rpx,10rpx,5rpx,5rpx,rgba(0, 0, 0, 0.8);
	}
</style>
